<template>
  <view class="uni-padding-wrap uni-common-pb">
    <!-- #ifdef APP-PLUS || MP -->
    <app-plus-bar/>
    <!-- #endif -->
    <uni-nav-bar :fixed="true"
                 :shadow='false'
                 color="#fff"
                 background-color="#0AAFFF"
                 @click-left="_handleLeft"
    >
      <block slot="left">
        <view class="city">
          <view>{{ city }}</view>
          <uni-icon type="arrowdown" color="#fff" size="22"/>
        </view>
      </block>
      <view class="input-view">
        <uni-icon type="search" size="22" color="#666666"/>
        <input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm"/>
      </view>
    </uni-nav-bar>
    <view class="hotSearch">
      <view class="hotText">热搜</view>
      <view class="hotList" v-for="item,index in hotSearch">{{item}}</view>
    </view>
    <view class="top-banner">
      <view class="swiperBg"></view>
      <swiper class="swiper"
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration">
        <swiper-item v-for="(item,index) in swiperList" :key="index">
          <image :src="item.src"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="bannerListWrap">
      <view class="banList" v-for="(item,index) in bannerList" :key="index">
        <image class="icon" :src="item.icon"></image>
        <text>{{item.text}}</text>
      </view>
    </view>
    <view class="consult">
      <view class="consultTop">
        <view class="consultTL">
          <view class="icon">
            <uni-icon type="sound" color="#fff" size="14"/>
          </view>
          <view class="consultName">咨询</view>
        </view>
        <view class="consultTr">
          <uni-icon type="arrowright" color="#8f8f94" size="22"/>
        </view>
      </view>
      <view class="imgShow">
        <image class='imgBg' src='http://www.qunaxue.net/images/news/180918101034.jpg'></image>
        <view class='imgText'>去哪学APP新版本登场！</view>
      </view>
      <view class="consultRe">
        <view class="reText">应对数学考试中的小马虎</view>
        <image class='reimg' src='http://www.qunaxue.net/images/news/180918101034.jpg'></image>
      </view>
    </view>
    <view>
      <view class="uni-tab-bar">
        <view id="tab-bar" class="uni-swiper-tab">
          <view
              v-for="(tab,index) in tabBars"
              :key="tab.id"
              class="swiper-tab-list"
              :class="tabIndex==index ? 'active' : ''"
              :id="tab.id"
              :data-current="index"
              @click="_handleTapTab(index)">
            <view class='icon' :class="'icon' + index"></view>
            <text>{{tab.name}}</text>
          </view>
        </view>
      </view>
      <view class="hotBox">
        <content-list :contentList='contentList'/>
      </view>
    </view>

  </view>
</template>
<script>
  import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'
  import contentList from '@/components/contentList.vue'
  import appPlusBar from '@/components/appPlusBar.vue'

  export default {
    components: {
      uniNavBar,
      uniIcon,
      contentList,
      appPlusBar
    },
    data() {
      return {
        tabIndex: 0,
        city: '北京',
        hotSearch:['嘻嘻嘻','嘻嘻嘻嘻嘻','嘻嘻','嘻嘻嘻嘻','嘻嘻嘻','嘻嘻嘻','嘻嘻嘻'],
        swiperList: [
          {
            src: 'http://www.qunaxue.net/images/news/190424181134.png'
          },
          {
            src: 'http://www.qunaxue.net/images/news/190117140730.jpg'
          },
          {
            src: 'http://www.qunaxue.net/images/news/190508103124.jpg'
          }
        ],
        bannerList: [
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
          {
            icon: '../../static/image/1.png',
            text: '周边教育',
            path: '',
          },
        ],
        indicatorDots: true,
        autoplay: true,
        clientNumber: '394,8638',
        interval: 2000,
        duration: 500,
        iconType: ['success'],
        tabBars: [{
          name: '热门机构',
          id: '0'
        }, {
          name: '特色课程',
          id: '1'
        }],
        contentList: null,
        list: [{
          title: "幸福",
          address: '浦东新区',
          content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情",
          img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
        },
          {
            title: "木屋",
            address: '浦东新区',
            content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖。",
            img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
          },
          {
            title: "CBD",
            address: '浦东新区',
            content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般。",
            img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
          }
        ],
        list1: [
          {
            type: 1,
            title: "幸福1",
            address: '浦东新区',
            content: {
              currMoney: '99',
              oldMoney: '199',
              discount: '5.0折',
              studyTime: '2'
            },
            img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
          },
          {
            type: 2,
            title: "木屋1",
            address: '浦东新区',
            content: {
              studyTime: '50',
              contentText: '适合9-10周岁'
            },
            img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
          },
          {
            type: 3,
            title: "CBD1",
            address: '浦东新区',
            content: {
              studyTime: '50',
              contentText: '适合9-10周岁啊啊啊啊啊啊啊'
            },
            img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
          }
        ]
      }
    },
    onLaunch: function () {
    },
    onShow: function () {
      this.contentList = this.list
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        });
      },

      _handleLeft() {
        uni.navigateTo({
					url: `/pages/address/index`
				})
      },
      _handleRight() {
        uni.showToast({
          title: 'right'
        });
      },

      _handleTapTab(index) {
        this.tabIndex = index;
        index == 0 ? this.contentList = this.list : this.contentList = this.list1
      },
    }
  }
</script>

<style lang="scss">
  @import "../../common/home";
</style>
